<template>
  <el-dialog
    :title="`${isCreate ? '添加' : '编辑'}学龄`"
    :visible.sync="dialogVisible"
    class="dialog"
    width="400px">
    <el-form
      :model="formData"
      label-width="90px"
      ref="form"
      size="small">
      <el-form-item label="学龄">
        <div class="flex">
          <el-input-number v-model="formData.minVal" :controls="false"></el-input-number>
          <div class="px-16">至</div>
          <el-input-number v-model="formData.maxVal" :controls="false"></el-input-number>
        </div>
      </el-form-item>
    </el-form>
    <dialog-footer
      slot="footer"
      @cancel="dialogVisible = false"
      @confirm="confirm"
    />
  </el-dialog>
</template>
<script>
import { saveStudentAge, updateStudentAge } from '@/api/course';

export default {
  props: {
    initFormData: Object,
    isCreate: Boolean,
  },
  data() {
    return {
      formData: {
        ...this.initFormData,
      },
      dialogVisible: false,
    };
  },
  watch: {
    initFormData(val) {
      this.formData = { ...val };
    },
  },
  methods: {
    async confirm() {
      const { minVal, maxVal, id } = this.formData;
      if (minVal !== undefined && maxVal !== undefined) {
        if (this.isCreate) {
          await saveStudentAge(this.formData);
        } else {
          await updateStudentAge({
            minVal, maxVal, id,
          });
        }
        this.dialogVisible = false;
        this.$emit('confirm');
      } else {
        this.$message.error('最小学龄和最大学龄不能为空');
      }
    },
  },
};
</script>
<style lang="scss" scoped>
  .dialog {
    ::v-deep .el-input-number {
      width: 80px;
      .el-input__inner {
        width: 80px;
      }
    }
  }
</style>
